<template>
  <div>
    <el-card>
      <el-col>
        <el-input class="search" placeholder="搜索" />
        <el-button type="primary" icon="el-icon-search" size="small"
          >搜索</el-button
        >
        <el-button type="primary" size="small">重置</el-button>
      </el-col>
      <!-- 新增用户 -->
      <el-row class="right">
        <el-button
          type="primary"
          size="small"
          class="right-button"
          @click="addpermission"
        >
          <i class="el-icon-edit"></i>
          <span>新增用户</span>
        </el-button>
      </el-row>
      <el-row class="res">
        <el-col class="el-icon-info"
          ><span>共 {{ this.total }} 条数据</span></el-col
        >
      </el-row>
      <!-- 列表区域 -->
      <el-table :data="permissionList" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="date" label="用户名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" sortable label="日期">
          <template slot-scope="scope">
            <span>{{ scope.row.create_date | YYYY-MM-DD HH:mm:ss}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </el-card>
    <!-- 权限组对话框 -->
    <el-dialog title="创建权限组" :visible.sync="dialogVisible" width="50%">
      <!-- 内容区域 -->
      <el-form
        :model="addForm"
        :rules="addFormrules"
        ref="addFormRef"
        label-width="100px"
        class="lable-left"
      >
        <el-form-item label="用户名" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            :data="permissionsProps"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :props="permissionsProps"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPermissionTree">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { permissionList, addPermission, List } from '@/api/permission'
export default {
  data() {
    return {
      // 添加表单的数据对象
      addForm: {
        title: '',
        permissions: []
      },
      permissionsProps: {},
      data: [],
      currentPage4: 1,
      permissionList: [],
      queryInfo: {
        keyword: '',
        // 当前页数
        page: 1,
        // 页码
        pagesize: 10
      },
      total: 0, // 总条数
      dialogVisible: false,
      addFormrules: {
        title: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '用户名的长度在3~10个字符之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getpermissionList()
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getpermissionList() {
      try {
        const { data } = await permissionList(this.queryInfo)
        console.log(data)
        this.permissionList = data.list
        this.total = data.counts
      } catch (err) {
        this.$message.error('请求失败')
      }
    },
    // 简单权限列表
    async getList() {
      const { data } = await List(this.queryInfo)
      console.log(data)
      this.permissionsProps = data.list
    },
    // 当前页数
    handleSizeChange(newSize) {
      this.queryInfo.page = newSize
      this.getpermissionList()
    },
    // 当前页码
    handleCurrentChange(newPage) {
      this.queryInfo.pagesize = newPage
      this.getpermissionList()
    },
    // 添加权限组
    addpermission() {
      this.dialogVisible = true
    },
    async addPermissionTree() {
      const { data } = await addPermission(this.addForm)
      console.log(data)
      try {
      } catch (err) {
        this.$total('获取失败')
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-card__body {
  .search {
    width: 200px;
    height: 36px;
  }
  .res {
    height: 33px;
    display: flex;
    align-items: center;
    background-color: #f4f4f5;
    padding-left: 20px;
    margin-bottom: 10px;
    color: #909399;
    font-size: 13px;
    span {
      padding-left: 8px;
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    .right-button {
      display: block;
      margin-top: 50px;
    }
  }
}
/deep/.el-dialog__header {
  background-color: #409eff;
  .el-dialog__title {
    color: #fff;
  }
  .el-icon-close {
    color: #fff;
  }
}
/deep/.lable-left {
  width: 400px;
  margin-left: 120px;
  .el-form-item__label {
    font-weight: 700;
  }
}
</style>
